<template>
	<view class="uni-container">
		<uni-forms ref="form" :value="formData" validate-trigger="submit" err-show-type="toast">
			<uni-forms-item name="level" label="服务等级">
				<el-select v-model="formData.level" placeholder="请选择">
					<el-option v-for="(item,index) in formOptions.level_localdata" :key="index" :value="item"
						:label="item">{{item}}</el-option>
				</el-select>
			</uni-forms-item>
			<uni-forms-item name="title" label="服务级别名称">
				<uni-easyinput placeholder="服务级别名称" v-model="formData.title" />
			</uni-forms-item>
			<uni-forms-item name="sub_title" label="服务级别副标题">
				<uni-easyinput placeholder="服务级别副标题" v-model="formData.sub_title" />
			</uni-forms-item>
			<uni-forms-item name="desc" label="套餐说明">
				<uni-easyinput type="textarea" placeholder="套餐说明" v-model="formData.desc" />
			</uni-forms-item>
			<uni-forms-item name="icon" label="套餐图片">
				<cloud-image placeholder="套餐图片" v-model="formData.icon"></cloud-image>
			</uni-forms-item>
			<div class="type-title">医院陪护</div>
			<uni-forms-item name="day_price" class="form-label" label="日单价">
				<uni-easyinput placeholder="日单价" type="number" v-model="formData.day_price" />
			</uni-forms-item>
			<uni-forms-item name="hour_price" class="form-label" label="时单价">
				<uni-easyinput placeholder="时单价" type="number" v-model="formData.hour_price" />
			</uni-forms-item>
			<uni-forms-item name="month_price" class="form-label" label="月单价">
				<uni-easyinput placeholder="月单价" type="number" v-model="formData.month_price" />
			</uni-forms-item>
			<div class="type-title">到家陪护</div>
			<uni-forms-item name="home_day_price" class="form-label" label="日单价">
				<uni-easyinput placeholder="日单价" type="number" v-model="formData.home_day_price" />
			</uni-forms-item>
			<uni-forms-item name="home_hour_price" class="form-label" label="时单价">
				<uni-easyinput placeholder="时单价" type="number" v-model="formData.home_hour_price" />
			</uni-forms-item>
			<uni-forms-item name="home_month_price" class="form-label" label="月单价">
				<uni-easyinput placeholder="月单价" type="number" v-model="formData.home_month_price" />
			</uni-forms-item>
			<div class="type-title">机构陪护</div>
			<uni-forms-item name="organ_day_price" class="form-label" label="日单价">
				<uni-easyinput placeholder="日单价" type="number" v-model="formData.organ_day_price" />
			</uni-forms-item>
			<uni-forms-item name="organ_hour_price" class="form-label" label="时单价">
				<uni-easyinput placeholder="时单价" type="number" v-model="formData.organ_hour_price" />
			</uni-forms-item>
			<uni-forms-item name="organ_month_price" class="form-label" label="月单价">
				<uni-easyinput placeholder="月单价" type="number" v-model="formData.organ_month_price" />
			</uni-forms-item>
			<view class="uni-button-group"><button type="primary" class="uni-button" @click="submit">提交</button></view>
		</uni-forms>
	</view>
</template>

<script>
	import {
		validator
	} from '../../js_sdk/validator/services.js';

	const db = uniCloud.database();
	const dbCollectionName = 'services';

	function getValidator(fields) {
		console.log(fields)
		let reuslt = {};
		for (let key in validator) {
			if (fields.indexOf(key) > -1) {
				reuslt[key] = validator[key];
			}
		}
		return reuslt;
	}

	export default {
		data() {
			return {
				formData: {
					level: null,
					title: '',
					sub_title: '',
					desc: '',
					icon: '',
					day_price: 0,
					hour_price: 0,
					month_price: 0,
					home_day_price:0,
					home_hour_price:0,
					home_month_price:0,
					organ_day_price:0,
					organ_hour_price:0,
					organ_month_price:0
				},
				formOptions: {
					level_localdata: [1, 2, 3, 4, 5, 6, 7, 8, 9]
				},
				rules: {
					...getValidator(['level', 'title', 'sub_title', 'desc', 'icon', 'day_price', 'hour_price',
						'month_price','home_day_price','home_hour_price','home_month_price','organ_day_price','organ_hour_price','organ_month_price'
					])
				}
			};
		},
		onLoad(e) {
			const id = e.id;
			this.formDataId = id;
			this.getDetail(id);
		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		methods: {
			/**
			 * 触发表单提交
			 */
			submit() {
				uni.showLoading({
					mask: true
				});
				this.$refs.form
					.validate()
					.then(res => {
						res.day_price = res.day_price * 100;
						res.hour_price = res.hour_price * 100;
						res.month_price = res.month_price * 100;
						
						res.home_day_price = res.home_day_price * 100;
						res.home_hour_price = res.home_hour_price * 100;
						res.home_month_price = res.home_month_price * 100;
				
						res.organ_day_price = res.organ_day_price * 100;
						res.organ_hour_price = res.organ_hour_price * 100;
						res.organ_month_price = res.organ_month_price * 100;
						this.submitForm(res);
					})
					.catch(errors => {
						uni.hideLoading();
					});
			},

			submitForm(value) {
				console.log(value)
				// 使用 clientDB 提交数据
				db.collection(dbCollectionName)
					.doc(this.formDataId)
					.update(value)
					.then(res => {
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						});
						this.getOpenerEventChannel().emit('refreshData');
					    setTimeout(() => uni.navigateBack(), 500);
					})
					.catch(err => {
						uni.showModal({
							content: err.message || '请求服务失败',
							showCancel: false
						});
					})
					.finally(() => {
						uni.hideLoading();
					});
			},

			/**
			 * 获取表单数据
			 * @param {Object} id
			 */
			getDetail(id) {
				uni.showLoading({
					mask: true
				});
				db.collection(dbCollectionName)
					.doc(id)
					.field('level,title,sub_title,desc,icon,day_price,hour_price,month_price,home_day_price,home_hour_price,home_month_price,organ_day_price,organ_hour_price,organ_month_price')
					.get()
					.then(res => {
						const data = res.result.data[0];
						if (data) {
							data.day_price = data.day_price / 100;
							data.hour_price = data.hour_price / 100;
							data.month_price = data.month_price / 100;
							
							data.home_day_price = data.home_day_price / 100;
							data.home_hour_price = data.home_hour_price / 100;
							data.home_month_price = data.home_month_price / 100;
							
							data.organ_day_price = data.organ_day_price / 100;
							data.organ_hour_price = data.organ_hour_price / 100;
							data.organ_month_price = data.organ_month_price / 100;
							this.formData = data;
						}
					})
					.catch(err => {
						uni.showModal({
							content: err.message || '请求服务失败',
							showCancel: false
						});
					})
					.finally(() => {
						uni.hideLoading();
					});
			}
		}
	};
</script>

<style>
	.type-title {
		font-weight: 700;
		color: #48ced2;
	}
	
	.form-label {
		margin-left: 20px;
	}
	
	.uni-container {
		padding: 15px;
	}
	.uni-input-border,
	.uni-textarea-border {
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
	}

	.uni-input-border {
		padding: 0 10px;
		height: 35px;
	}

	.uni-textarea-border {
		padding: 10px;
		height: 80px;
	}

	.uni-button-group {
		margin-top: 50px;
		display: flex;
		justify-content: center;
	}

	.uni-button {
		width: 184px;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 4px;
		line-height: 1;
		margin: 0;
	}
</style>
